import { Children, useState } from "react";
import { Layout, Menu, theme } from "antd";
import { useSelector } from "react-redux";
import { globalConfig } from "@/globalConfig";
import { useNavigate, useLocation } from "react-router-dom";
import {
  HomeOutlined,
  MenuFoldOutlined,
  MenuUnfoldOutlined,
  UserOutlined,
} from "@ant-design/icons";
import "./index.less";

const AntdSider = Layout.Sider;
const { useToken } = theme;

const Sider = () => {
  const globalTheme = useSelector((state) => state.theme);

  const { token } = useToken();

  // 当前路由地址
  const location = useLocation();
  // 路由hook
  const navigate = useNavigate();

  // 左侧导航的开合状态
  const [collapsed, setCollapsed] = useState(false);

  const items = [
    {
      label: "首页",
      key: "/home",
      icon: <HomeOutlined />,
      children: null,
      type: null,
      onClick: () => {
        navigate("/home");
      },
    },
    {
      label: "用户管理",
      key: "/users",
      icon: <UserOutlined />,
      children: null,
      type: null,
      onClick: () => {
        navigate("/users");
      },
    },
  ];

  const onCollapse = () => {
    setCollapsed(!collapsed);
  };

  let siderTheme = "dark";
  if (globalConfig.siderTheme === "light") {
    siderTheme = "light";
  } else if (globalConfig.siderTheme === "theme") {
    globalTheme.dark ? (siderTheme = "dark") : (siderTheme = "light");
  }

  const fullWidth = 200;

  const collapsedWidth = 49;

  return (
    <AntdSider
      className="M-sider"
      trigger={null}
      collapsible
      collapsed={collapsed}
      collapsedWidth={collapsedWidth}
      width={fullWidth}
      theme={siderTheme}
      style={{
        backgroundColor: token.colorBgContainer,
        borderColor: token.colorBorderSecondary,
      }}
    >
      <div className="sider-main">
        <Menu
          mode="inline"
          selectedKeys={location.pathname}
          items={items}
          className="sider-menu"
        ></Menu>
        <div
          className="sider-footer"
          onClick={onCollapse}
          style={{
            color: token.colorTextBase,
            borderTopColor: token.colorBorder,
          }}
        >
          {collapsed ? <MenuUnfoldOutlined /> : <MenuFoldOutlined />}
        </div>
      </div>
    </AntdSider>
  );
};

export default Sider;
